<template>
	<div class="bg-white">
		<Form ref="empForm" :label-width="80">
			<FormItem class="" label="账户名" prop="account">
				<Input v-model="user.account" placeholder="请输入用户的账户"></Input>
			</FormItem>
			<FormItem class="" label="手机号" prop="tel">
				<Input v-model="user.tel" placeholder="请输入手机号"></Input>
			</FormItem>
			<FormItem class="" label="角色" prop="role">
				<Checkbox v-for="(item,index) in roles" :key="item.roleCode" :label="item.roleCode"
					@on-change="changeRoles($event,item.roleCode)">{{item.name}}</Checkbox>
			</FormItem>
			<FormItem class="" label="姓名" prop="name">
				<Input v-model="emp.name" placeholder="请输入姓名"></Input>
			</FormItem>
			<FormItem class="" label="部门">
				<Select v-model="empDept.deptId" placeholder="请选择部门" @on-change="changeDept">
					<Option v-for="item in depts" :key="item.deptId" :value="item.deptId">{{ item.name}}</Option>
				</Select>
			</FormItem>
			<FormItem class="" label="职位">
				<Select v-model="empDept.jobId" placeholder="请选择职位">
					<Option v-for="item in jobs" :key="item.jobId" :value="item.jobId">{{ item.name}}</Option>
				</Select>
			</FormItem>
			<FormItem class="text-right">
				<Button @click="submit" type="primary">保存</Button>
			</FormItem>
		</Form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					account: "",
					tel: "",
					roles: []
				},
				emp: {
					name: ""
				},
				empDept: {
					deptId: "",
					jobId: "",
				},
				depts: [],
				jobs: [],
				roles: []
			}
		},
		created: function() {
			this.getAllDepts();
			this.getAllRoles();
		},
		methods: {
			getAllRoles: function() {
				this.http.get({
					url: "/role/all",
					param: {
						status:true
					}
				}).then(res => {
					this.roles = res;
				});
			},
			getAllDepts: function() {
				this.http.get({
					url: "/dept/all"
				}).then(res => {
					this.depts = res;
				});
			},
			getAllJobs: function(deptId) {
				this.http.get({
					url: "/dept/job/all",
					param: {
						deptId
					}
				}).then(res => {
					console.log(7);
					console.log(res);
					this.jobs = res;
				});
			},
			submit: function() {
				var accountTest = /^[a-zA-Z0-9_-]{4,16}$/;
				var telTest = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (this.user.account === "") {
					this.message.error("请输入账户名");
					return;
				} else if (!accountTest.test(this.user.account)) {
					this.message.error("账户名格式错误");
					return;
				}
				if (this.user.tel === "") {
					this.message.error("请输入手机号");
					return;
				} else if (!telTest.test(this.user.tel)) {
					this.message.error("手机号格式错误");
					return;
				}
				if (this.user.roles.length === 0) {
					this.message.error("角色必须选择");
					return;
				}
				if (this.emp.name === "") {
					this.message.error("请输入姓名");
					return;
				}
				this.message.confirm({
					title: "保存提示",
					content: "即将新增员工基本信息，确定吗？",
					onOk: () => {
						this.http.post({
							url: "/emp/info",
							param: {
								user: JSON.stringify(this.user),
								emp: JSON.stringify(this.emp),
								empDept: JSON.stringify(this.empDept)
							}
						}).then(res => {
							this.message.info("新增成功");
							this.$router.detail.close();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			changeDept: function(deptId) {
				this.empDept.jobId = [];
				this.jobs = [];
				this.getAllJobs(deptId);
			},
			changeRoles: function(event, roleCode) {
				if (event) {
					this.user.roles.push(roleCode);
				} else {
					var index = 0;
					for (; index < this.user.roles.length; index++) {
						if (roleCode == this.user.roles[index]) {
							break;
						}
					}
					this.user.roles.splice(index, 1);
				}
			}
		},
	}
</script>

<style>
</style>